/* eslint-disable */
<template>
  <div class="marketInfoMge-container">
    <div class="marketInfoMge-title">市场信息管理</div>
    <div class="marketInfoMge-body">
      <el-form ref="form" :model="form" label-width="88px" size="mini">
        <el-form-item label="查询" style="color:#444;font-size:13px">
          <el-input
            v-model="form.searchName"
            style="width: 40%;margin-right:10px"
            placeholder="请输入内容"
            clearable
          ></el-input>可输入市场名称、法人代表、联系人姓名、联系方式进行查询
        </el-form-item>
        <!-- <areaselect/> -->
        <el-form-item label="行政区域" style="width:100%">
          <el-radio-group v-model="radio1" @change="onRadioChange1">
            <el-radio-button
              v-for="item in arealist"
              :key="item.name"
              :label="item.value"
            >{{item.lable}}</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <div class="flexdiv">
          <el-form-item label="市场规模" style="width:100%">
            <el-radio-group v-model="radio2" @change="onRadioChange2">
              <el-radio-button
                v-for="item in area"
                :key="item.name"
                :label="item.value"
              >{{item.lable}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="摊位数" style="width:100%">
          <el-radio-group v-model="radio3" @change="onRadioChange3">
            <el-radio-button
              v-for="item in stallScale"
              :key="item.name"
              :label="item.value"
            >{{item.lable}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div class="flexdiv">
          <el-form-item label="举办者性质" style="width:100%">
            <el-radio-group v-model="radio4" @change="onRadioChange4">
              <el-radio-button
                v-for="item in organizer"
                :key="item.name"
                :label="item.value"
              >{{item.lable}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="市场星级" style="width:100%">
          <el-radio-group v-model="radio5" @change="onRadioChange5">
            <el-radio-button
              v-for="item in starLevel"
              :key="item.name"
              :label="item.value"
            >{{item.lable}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div class="submitbtn">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="marketInfoMge-table" id="InfoMgetab">
      <el-table :data="tableData" border style="width: 100%;text-align:center">
        <el-table-column prop="marketName" label="市场名称" width="180"></el-table-column>
        <el-table-column prop="areaNames" label="行政区域" width="180"></el-table-column>
        <el-table-column prop="street" label="所属街道"></el-table-column>
        <el-table-column prop="organizerStateValue" label="举办者性质"></el-table-column>
        <el-table-column prop="starLevelValue" label="市场星级"></el-table-column>
        <el-table-column prop="arer" label="市场规模"></el-table-column>
        <el-table-column prop="stallNumber" label="摊位数"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="pageSizes"
        :page-size="form.perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { log } from 'util';
/* eslint-disable */
import { mapGetters } from "vuex";
export default {
  name: "marketInfoMge",
  computed: {
    // ...mapGetters(['searchList']),
    // add(){
    //    console.log(this.$store.state.marketInfoMge.searchList)
    //    return this.$store.state.marketInfoMge.searchList
    // }
  },
 
  data() {
    return {
      input: "",
      form: {
        searchName: "", //	string	false	市场名称、法人、联系电话
        areaCode: "320101", //	string	false	地区编号	传字符串0为所有
        area: "0", //	string	false	商户id
        stallScale: "0", //	string	false	摊位规模
        starLevel: 0, //	int	true	商户id
        organizerState: 0, //	int	true	性质
        perPage: 5, //	int	true	一页显示几条
        page: 1 //	int	true	第几页
      },
      tableData: [],
      search: "search",
      searchform: {},
      radio1: 320101,
      radio2: 0,
      radio3: 0,
      radio4: 0,
      radio5: 0,
      marketId: 1,
      pageSizes: [1, 5, 10, 20],
      totalCount: 1, //个数选择器
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      arealist: [],
      area: [],
      stallScale: [],
      organizer: [],
      starLevel: [],
    };
  },
  mounted() {
    this.getData();
    // this.getSearch();
    // this.arealist=this.$store.state.marketInfoMge.arealist
    this.arealist = JSON.parse(sessionStorage.getItem("arealist"));
    // console.log(this.arealist)
    this.area = JSON.parse(sessionStorage.getItem("area"));
    this.stallScale = JSON.parse(sessionStorage.getItem("stallScale"));
    this.organizer = JSON.parse(sessionStorage.getItem("organizer"));
    this.starLevel = JSON.parse(sessionStorage.getItem("starLevel"));
  },
  methods: {
    getData() {
      if(this.form.areaCode=="320101"){
        this.form.areaCode=0
      }
      this.$store
        .dispatch("marketInfoMge/getData", this.form)
        .then(data => {
          // console.log(data);
          this.tableData = data.items;
          this.totalCount = data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleClick(row) {
      // console.log(row);
      this.marketId = row.marketId;
      // this.getDetail()
      this.$router.push({
        path: "/marketInfoMge/marketInfoDetail",
        query: { id: this.marketId }
      });
    },
    onSubmit() {
      this.getData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.perPage = val;
      this.form.page = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.page = val;
      this.getData();
    },
    onRadioChange1(val) {
      console.log(val);
      this.form.areaCode = val;
    },
    onRadioChange2(val) {
      console.log(val);
      this.form.area = val;
    },
    onRadioChange3(val) {
      console.log(val);
      this.form.stallScale = val;
    },
    onRadioChange4(val) {
      console.log(val);
      this.form.organizer = val;
    },
    onRadioChange5(val) {
      console.log(val);
      this.form.starLevel = val;
    }
  }
};
</script>

<style lang="scss" scoped>
.marketInfoMge {
  &-container {
    margin: 20px;
  }
  &-title {
    font-size: 18px;
    line-height: 46px;
    background: white;
    padding-left: 15px;
  }
  &-body {
    margin-top: 15px;
    background: white;
    padding: 15px;
    padding-bottom: 3px;
    margin-bottom: 15px;
    // color: #444;
    // font-size: 13px;
  }
}
#InfoMgetab .cell {
  text-align: center;
}
.selectdiv {
  display: flex;
  justify-content: flex-start;
}
.selectdiv div {
  padding: 0 10px;
  cursor: pointer;
}
.flexdiv {
  display: flex;
  justify-content: flex-start;
}
.submitbtn {
  width: 80%;
  margin-bottom: 18px;
  display: flex;
  justify-content: flex-end;
}
.active {
  background: #ccc;
}
::v-deep .el-radio__input {
  display: none;
}
.marketInfoMge-table {
  background: #fff;
}
::v-deep .el-radio-button--mini .el-radio-button__inner {
  font-size: 13px;
  font-weight: 400;
}
::v-deep .el-radio-button__inner {
  color: #444;
}
::v-deep .el-radio-button__inner,
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border: none;
  border-radius: 0px;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border: none;
  border-radius: 0px;
}
.passenger-select2 {
  margin-top: 8px;
}
.passenger-select2 ::v-deep .el-radio-button {
  margin-right: 10px;
}
// ::v-deep .el-table th > .cell {
//   color: #444;
// }
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-table th {
  background: #e5e5e5;
  border: #ccc;
}
::v-deep .el-table .cell {
  text-align: center;
}
</style>
